<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>购物车示例</title>
  <style>
    /* 购物车整体样式 */
    .cart {
      width: 800px;
      margin: 50px auto;
      font-family: Arial, sans-serif;
    }
    /* 商品项样式 */
    .cart-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
    .cart-item img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
    .item-info {
      flex: 1;
    }
    .item-count {
      display: flex;
      align-items: center;
    }
    .item-count button {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
    .item-count input {
      width: 30px;
      height: 24px;
      text-align: center;
      border: 1px solid #ccc;
    }
    .delete-btn {
      width: 80px;
      height: 80px;
      cursor: pointer;
    }
    /* 底部操作栏样式 */
    .cart-footer {
      display: flex;
      align-items: center;
      padding: 10px 0;
    }
    .cart-footer label {
      margin-right: 20px;
      cursor: pointer;
    }
    .total-price {
      margin: 0 20px;
    }
    .checkout-btn {
      padding: 6px 12px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="cart">
    <div class="cart-item">
      <input type="checkbox" class="item-check" checked>
      <img src="https://via.placeholder.com/100x100?text=Einstein" alt="爱因斯坦">
      <div class="item-info">
        <div class="item-name">爱因斯坦的大脑</div>
        <div class="item-price">价格：¥7.49</div>
        <div class="item-count">
          <button class="decrease">-</button>
          <input type="number" value="2" class="count-input">
          <button class="increase">+</button>
        </div>
      </div>
      <button class="delete-btn">删除</button>
    </div>
    <div class="cart-item">
      <input type="checkbox" class="item-check">
      <img src="https://via.placeholder.com/100x100?text=Einstein" alt="爱因斯坦">
      <div class="item-info">
        <div class="item-name">爱因斯坦的大脑</div>
        <div class="item-price">价格：¥7.49</div>
        <div class="item-count">
          <button class="decrease">-</button>
          <input type="number" value="2" class="count-input">
        </div>
        <button class="delete-btn">删除</button>
      </div>
    </div>
    <div class="cart-item">
      <input type="checkbox" class="item-check" checked>
      <img src="https://via.placeholder.com/100x100?text=Einstein" alt="爱因斯坦">
      <div class="item-info">
        <div class="item-name">爱因斯坦的大脑</div>
        <div class="item-price">价格:¥7.49</div>
        <div class="item-count">
          <button class="decrease">-</button>
          <input type="number" value="2" class="count-input">
          <button class="increase">+</button>
        </div>
      </div>
      <button class="delete-btn">删除</button>
    </div>
    <div class="cart-footer">
      <label><input type="checkbox" id="select-all"> 全选</label>
      <div class="total-price">总价：<span id="total">¥0</span></div>
      <button class="checkout-btn">结算 (5)</button>
    </div>
  </div>

  <script>
    // 1. 获取 DOM 元素
    let itemChecks = document.querySelectorAll('.item-check');
    let selectAll = document.getElementById('select-all');
    let decreaseBtns = document.querySelectorAll('.decrease');
    let increaseBtns = document.querySelectorAll('.increase');
    let countInputs = document.querySelectorAll('.count-input');
    let deleteBtns = document.querySelectorAll('.delete-btn');
    let totalEl = document.getElementById('total');

    // 2. 计算总价函数
    function calculateTotal() {
      let total = 0;
      itemChecks.forEach((check, index) => {
        if (check.checked) {
          const price = 7.49; // 商品单价
          const count = parseInt(countInputs[index].value);
          total += price * count;
        }
      });
      totalEl.textContent = `¥${total.toFixed(2)}`;
    }

    // 3. 初始化计算总价
    calculateTotal();

    // 4. 单选框点击事件
    itemChecks.forEach(check => {
      check.addEventListener('click', () => {
        // 检查是否所有单选框都被选中，同步全选框状态
        const allChecked = Array.from(itemChecks).every(c => c.checked);
        selectAll.checked = allChecked;
        calculateTotal();
      });
    });

    // 5. 全选框点击事件
    selectAll.addEventListener('click', () => {
      itemChecks.forEach(check => {
        check.checked = selectAll.checked;
      });
      calculateTotal();
    });

    // 6. 减少数量按钮事件
    decreaseBtns.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        let count = parseInt(countInputs[index].value);
        if (count > 1) {
          countInputs[index].value = count - 1;
          calculateTotal();
        }
      });
    });

    // 7. 增加数量按钮事件
    increaseBtns.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        let count = parseInt(countInputs[index].value);
        countInputs[index].value = count + 1;
        calculateTotal();
      });
    });

    // 8. 输入框改变事件（直接输入数量时同步总价）
    countInputs.forEach(input => {
      input.addEventListener('input', () => {
        // 确保输入为正整数
        const value = parseInt(input.value);
        if (isNaN(value) || value < 1) {
          input.value = 1;
        }
        calculateTotal();
      });
    });

    // 9. 删除按钮事件（示例：点击后移除当前商品项）
    deleteBtns.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        const item = btn.closest('.cart-item');
        item.remove();
        calculateTotal();
        // 重新同步全选框状态（可选）
        const remainingChecks = document.querySelectorAll('.item-check');
        selectAll.checked = remainingChecks.length > 0 && Array.from(remainingChecks).every(c => c.checked);
      });
    });
  </script>
</body>
</html>